<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <style>
        body {
            background-color: #0f0f0f;
            text-align: center;
            margin-top: 100px;
        }

        div {
            color: red;
            font-size: 100px;
        }

        img {
            display: none;
        }

        p {
            display: none;
            color: blue;
        }
    </style>
</head>
<body>
    <img id="icon" src="imgs/pet-01.jpg">
    <p id="word">哈哈哈</p>
    <div id="count">10</div>

    <script type="text/javascript">
        var img = document.getElementById('icon');
        var word = document.getElementById('word');
        var count_down = document.getElementById('count');

        // 设置定时器
        var timer = setInterval(function () {
            count_down.innerText -= 1;
            if (count_down.innerText == 0) {
                // 清除定时器
                clearInterval(timer);

                // 显示和隐藏
                word.style.display = 'block';
                img.style.display = 'inline-block';
                count_down.style.display = 'none';
            }
        }, 1000)
    </script>
</body>
</html>